{include file="public/_header" /}
<style>
    #mainForm {
        max-width: 700px;
        margin: 30px auto;
    }

    #mainForm .layui-form-item {
        margin-bottom: 25px;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">{$title}</div>
        <div class="layui-card-body">
            <form class="layui-form" id="mainForm">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">用户名:</label>
                    <div class="layui-input-block">
                        <input name="userName" id="userName" value="{$data.user_name}" placeholder="请输入" required class="layui-input"
                               lay-verType="tips"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">密码:</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" id="password" required placeholder="请输入密码" class="layui-input"
                               lay-verType="tips"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">所属角色:</label>
                    <div class="layui-input-block">
                        <select name="group" id="group" required>
                            <option value="">--请选择角色--</option>
                            {volist name="groups" id="val"}
                            <option {eq name="data.group" value="$val['id']"} selected {/eq} value="{$val['id']}">{$val['title']}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <!-- 上传头像 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">上传头像:</label>
                    <div class="layui-input-block">
                        <div id="headImg">
                            <img src="{$data.head_url}" onerror="/eleadmin/assets/images/head.jpg" id="headUrl" width="100" height="100">
                        </div>
                        <button type="button" class="layui-btn" id="uploadHeadUrl">上传图片</button>
                        <input type="hidden" name="head_url" id="head_url" value="{$data.head_url}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">姓名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" value="{$data.name}" required placeholder="请输入姓名" class="layui-input"
                               lay-verType="tips"/>
                    </div>
                </div>

                <div class="form-group-bottom text-center">
                    <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
                    <button class="layui-btn" lay-filter="add" lay-submit>&emsp;提交&emsp;</button>
                </div>
                <input type="hidden" name="id" value="{$data.id}">
            </form>
        </div>
    </div>
</div>
{include file="public/_footer"}
<script>
    layui.use(['form', 'element','upload'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var upload = layui.upload;

        upload.render({
            elem: '#uploadHeadUrl'
            ,url: '/admin/upload/upload' //改成您自己的上传接口
            ,multiple: false
            , exts: 'jpg|png|gif|'
            ,before: function(obj){
            }
            ,done: function(res){
                //上传完毕
                if(res.code === 0) {
                    $('#headUrl').attr('src',res.src);
                    $('#head_url').val(res.src);
                }
            }
        });

        form.on('submit(add)', function (data) {
            var arr = data.field;
            if($.trim(arr.userName) === '') {
                layer.msg('用户名不能为空!');
                return false;
            }

            if($.trim(arr.group) === '') {
                layer.msg('请选择角色!');
                return false;

            }

            if($.trim(arr.name) === '') {
                layer.msg('姓名不能为空!');
                return false;
            }

            // 提交数据
            $.post('{:url("edit")}', arr, function (res) {
                if(res.code === 0) {
                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.href = "{:url('index')}";//'index.html';
                    },500);
                    // layer.open({
                    //     type: 1
                    //     ,offset: 'auto'
                    //     ,id: 'layerDemo' //防止重复弹出
                    //     ,content: '<div style="padding: 20px 100px;">'+ res.msg +'</div>'
                    //     ,btn: '关闭'
                    //     ,btnAlign: 'c' //按钮居中
                    //     ,shade: 0 //不显示遮罩
                    //     ,yes: function(){
                    //         window.location.href = "{:url('index')}";//'index.html';
                    //         layer.closeAll();
                    //     }
                    // });
                }else {
                    layer.msg(res.msg);
                }
            },'JSON');
            return false;
        });




    });


</script>
</body>
</html>